<template>
  <p>当前状态: {{ status }}</p>
  <p>聊天信息: {{ message }}</p>
  <p><input v-model="val" /></p>
  <button @click="submit">提交</button>
  <audio controls src="http://20230201.ren/state/music/蓝心羽 - 阿拉斯加海湾.flac"></audio>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'

const status = ref<String>('未连接')
const message = ref<String>('')
const val = ref<String>('')

const socket = new WebSocket('ws://20230201.ren/api/openai/chat')
socket.addEventListener('open', (event) => {
  status.value = '已连接'
})
socket.addEventListener('error', (event) => {
  status.value = '出错误'
})
socket.addEventListener('close', (event) => {
  status.value = '已断开'
})
socket.addEventListener('message', (event) => {
  message.value += event.data
})

const submit = () => {
  socket.send(val.value)
  message.value = ''
}
onBeforeUnmount(() => {
  if (status.value == '已连接') {
    socket.send('quit')
  }
})
</script>

<style scoped lang="scss"></style>
